<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import router from '@/router'

const task = ref([''])
const val = ref('')

// 自定义主题变量（可选）
const themeVars = {
  fieldInputBorderBottomColor: '#1989fa',
  buttonPrimaryBackgroundColor: '#1989fa',
};

function addTask() {
  task.value.push(val.value)
  sessionStorage.setItem('task', JSON.stringify(task.value))
  console.log(task.value)
}

function delTask(index: number) {
  task.value.splice(index, 1)
  sessionStorage.setItem('task', JSON.stringify(task.value))
}

function changeTask(index: number) {
  const newTask = prompt('请输入新的任务内容', task.value[index])
  if (newTask !== null && newTask.trim()) {
    task.value[index] = newTask
    sessionStorage.setItem('task', JSON.stringify(task.value))
  }
}

onMounted(() => {
  const tasks = sessionStorage.getItem('task')
  if (tasks !== null) {
    task.value = JSON.parse(tasks)
  }
})
</script>

<style scoped>
.container {
  padding: 16px;
  max-width: 600px;
  margin: 0 auto;
}

/* 移动端适配样式 */
@media (max-width: 768px) {
  .van-cell__title {
    font-size: 14px;
  }

  .van-button--small {
    font-size: 12px;
    padding: 4px 8px;
  }
}
</style>

<template>
  <div class="container"
  style="display: flex;flex-direction: column;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);padding: 20px;border-radius: 10px;position: relative;;left: 45%;top:150px">
  <van-button type="primary" @click="router.push('/home')" style="margin: 20px;width: 60px;">返回</van-button>
    <div style="width: 300px; display: flex;">
      <input id="save" type="text" v-model.trim="val" placeholder="please input task"
        style="width: 200px;height: 30px;">
      <van-button type="primary" id="add" @click="addTask()" style="height: 30px;">click</van-button>
    </div>
    <div style="height: 250px;overflow: auto;">

      <div id="list-box" style="width: 300px;">
        <div v-for="item in task.slice(1)">
          <div style="width: 250px;height: 45px;display: flex;justify-content: space-between;">
            <div style="max-width: 100px; overflow-x: auto;"> {{ item }}</div>
            <div>
              <van-button id="change" @click="changeTask($event)">change</van-button>
              <van-button id="del" @click="delTask($event)">delete</van-button>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>